<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

    <style>

        /* These are some good CSS settings for a circular magnifying glass 
           Try removing the border-radius to make a square magnifying glass */
        .magnifyTool{
            border: 4px white solid;
            box-shadow: 2px 2px 10px #1e1e1e;
            border-radius: 50%;
            display: none;
            cursor: none;
        }
        /* prevents selection when left click dragging */
        .disable-selection {
            -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
        }
        /* prevents cursor from changing to the i bar on the overlays*/
        .noIbar {
            cursor:default;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            Magnify Example
        </h1>
        <p>
            This page contains an example of the magnification tool.
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-2">
            <ul class="list-group">
                <a id="activate" class="list-group-item">Activate</a>
                <a id="disable" class="list-group-item">Disable</a>
            </ul>
            <label for="magLevelRange">Magnification Level</label>
            <input id="magLevelRange" type="range" min="1" value="2" max="10" />
            <br/>
            <label for="magSizeRange">Magnifying glass size</label>
            <input id="magSizeRange" type="range" min="100" value="225" max="300" step="25"/>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image class='cornerstone-enabled-image disable-selection noIbar''
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="dicomImage"
                     style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <p><strong>Note:</strong> The position of the magnifying glass is absolute, relative to the position of your container. The container must have it's CSS position set to relative, or the tool will be placed incorrectly.<p>
        </div>
    </div>
</body>

<script src="../jquery.min.js"></script>

<!-- include the hammer.js library for touch gestures-->
<script src="../hammer.min.js"></script>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
    var element = $('#dicomImage').get(0);

    var imageId = 'example://1';

    // image enable the dicomImage element
    cornerstone.enable(element);

    // Enable mouse and touch input
    cornerstoneTools.mouseInput.enable(element);
    cornerstoneTools.touchInput.enable(element);

    var magLevelRange = $("#magLevelRange")
    magLevelRange.on("change", function() {
        var config = cornerstoneTools.magnify.getConfiguration();
        config.magnificationLevel = parseInt(magLevelRange.val(), 10);
    });

    var magSizeRange = $("#magSizeRange")
    magSizeRange.on("change", function() {
        var config = cornerstoneTools.magnify.getConfiguration();
        config.magnifySize = parseInt(magSizeRange.val(), 10)
        var magnify = $(".magnifyTool").get(0);
        magnify.width = config.magnifySize;
        magnify.height = config.magnifySize;
    });

    var config = {
        magnifySize: parseInt(magSizeRange.val(), 10),
        magnificationLevel: parseInt(magLevelRange.val(), 10)
    };

    cornerstoneTools.magnify.setConfiguration(config);

    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);

        cornerstoneTools.magnify.enable(element);
        cornerstoneTools.magnifyTouchDrag.enable(element);

        cornerstoneTools.pan.activate(element, 2);
        cornerstoneTools.zoom.activate(element, 4);

        // Enable all tools we want to use with this element
        cornerstoneTools.magnify.activate(element, 1);
        cornerstoneTools.magnifyTouchDrag.activate(element);

        activate("#activate");

        function activate(id)
        {
            $('a').removeClass('active');
            $(id).addClass('active');
        }

        // Tool button event handlers that set the new active tool
        $('#disable').click(function() {
            activate("#disable");
            cornerstoneTools.magnify.disable(element);
            cornerstoneTools.magnifyTouchDrag.disable(element);
            return false;
        });
        $('#activate').click(function() {
            activate("#activate");
            cornerstoneTools.magnify.activate(element, 1);
            cornerstoneTools.magnifyTouchDrag.activate(element);
            return false;
        });

    });

</script>
</html>
